/* Monaco editor loading placeholder — shared by dynamic() loading and fallback render */
.editorLoadingPlaceholder {
  padding: var(--base-size-16);
  text-align: center;
  height: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bgColor-muted);
  color: var(--fgColor-muted);
  font-size: var(--text-body-size-small);
}

/* Wrapper that adds bottom spacing after the solve-error Banner */
.solveErrorBanner {
  margin-bottom: var(--base-size-16);
}
```

**ChallengeSandbox.tsx changes:**
- The two loading placeholder divs now use `className={styles.editorLoadingPlaceholder}` (DRY — one class shared by both)
- The `(Banner style=\{\{ marginBottom: 16 }})` is now wrapped in `(div className={styles.solveErrorBanner})`, cleanly separating layout concerns from the Primer component
- Also switched hardcoded `'var(--bgColor-muted, #f6f8fa)'` fallback values to the canonical `var(--bgColor-muted)` tokens (design-system aligned)

---

## Result

- **3 inline style objects eliminated** → 0 new object allocations per render for these elements
- **2 identical code blocks → 1 shared CSS class** (DRY improvement)
- CSS classes are evaluated once by the browser's style engine and cached; inline styles bypass this cache

---

## Verification

```
✓ npx tsc --noEmit  — no errors in changed files
✓ npm run lint      — clean
✓ npm test          — 1025/1035 pass (10 pre-existing failures in src/lib/github/ unrelated to this change)